<template>
  <div>
    <div class="swiper-container">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <img :src="caseInfo.cover" alt />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="desc-box">
      <div class="txt-top">
        <div class="title">{{ caseInfo.title }}</div>
        <div class="name">by:{{ caseInfo.designer_name }}</div>
      </div>
      <div class="desc">
        <div class="left">设计理念：</div>
        <div class="right">{{caseInfo.content}}</div>
      </div>
    </div>
    <div
      class="content"
      :style="{'padding-bottom': userInfo && parseInt(userInfo.identity_type) ? 0 : paddingBottom + 'rem'}"
    >
      <div class="title">
        <i></i>
        案例欣赏
      </div>
      <div class="intro-msg" v-if="caseInfo.images.length">
        <img :src="item" alt v-for="(item, index) of caseInfo.images" :key="index" />
      </div>
      <no-result
        v-else
        :src="require('@/assets/images/2-zwnr.png')"
        msg="暂无案例可以欣赏~"
        class="no-result"
      />
    </div>
  </div>
</template>

<script>
import NoResult from '@/components/no-result/no-result'
export default {
  components: {
    NoResult
  },
  props: {
    caseInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      },
      paddingBottom: 2
    }
  }
}
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  // height: 5.2rem;
  height: 4.2rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.swiper-pagination {
  vertical-align: middle;
}
.swiper-container /deep/ .swiper-pagination-bullet-active {
  width: 0.2em;
  height: 0.2rem;
  border: 1px solid rgba(0, 4, 0, 1);
  background: transparent !important;
  border-radius: 50%;
}
.swiper-container /deep/ .swiper-pagination-bullet {
  width: 0.12rem;
  height: 0.12rem;
  background: rgba(0, 4, 0, 1);
  border-radius: 50%;
  transition: all 0.3s;
}
.desc-box {
  width: 100%;
  padding: 0 0.36rem;
  box-sizing: border-box;
  .txt-top {
    width: 100%;
    padding: 0.7rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(238, 238, 238, 1);

    .title {
      font-size: 0.4rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(0, 4, 0, 1);
      line-height: 0.4rem;
    }
    .name {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(0, 4, 0, 1);
      line-height: 0.28rem;
      margin-top: 0.27rem;
    }
  }
  .desc {
    width: 100%;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    display: flex;
    .left {
      width: 1.4rem;
      font-size: 0.26rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
      line-height: 0.32rem;
      font-weight: bold;
    }
    .right {
      flex: 1;
      white-space: pre-wrap;
      font-size: 0.22rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 0.38rem;
    }
  }
}
.content {
  width: 100%;
  padding: 0 0.36rem 0 0.36rem;
  box-sizing: border-box;
  .title {
    font-size: 0.38rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(0, 4, 0, 1);
    line-height: 0.38rem;
    padding: 0.8rem 0;
    i {
      display: inline-block;
      width: 0.24rem;
      height: 0.06rem;
      background: rgba(4, 36, 45, 1);
    }
  }
  .intro-msg {
    font-size: 0;
    img {
      width: 100%;
      margin-bottom: 0.15rem;
    }
  }
  .no-result {
    top: 6.1rem !important;
  }
}
</style>
